<template>
    <div>
        <el-card>
            <el-form :inline="true" style="display:flex">
                <el-form-item label="一级分类" style="flex: 1">
                    <el-select v-model="categoryStore.C1Id" @change="handleChange" :disabled="scene == 0 ? false : true">
                        <el-option v-for="(item, index) in categoryStore.C1Info" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="二级分类" style="flex: 1">
                    <el-select v-model="categoryStore.C2Id" @change="handleChange1" :disabled="scene == 0 ? false : true">
                        <el-option v-for="(item, index) in categoryStore.C2Info" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="三级分类" style="flex: 1">
                    <el-select v-model="categoryStore.C3Id" :disabled="scene == 0 ? false : true">
                        <el-option v-for="(item, index) in categoryStore.C3Info" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang='ts'>
import useCategoryStore from '@/store/modules/category'
import { onMounted, ref } from 'vue'

const categoryStore = useCategoryStore()
defineProps(['scene'])
onMounted(() => {
    categoryStore.getC1()
})

const handleChange = () => {
    categoryStore.C2Id = ""
    categoryStore.C3Id = ""
    categoryStore.C3Info = ""
    categoryStore.getC2()
}

const handleChange1 = () => {
    categoryStore.C3Id = ""
    categoryStore.getC3()
}
</script>

<style scoped></style>